<template>
  <div>
    <el-dialog
      top="80px"
      width="70%"
      append-to-body
      :visible.sync="visible"
      :before-close="hanldClose"
      :close-on-click-modal="false"
    >
      <el-table :data="liveVideo" class="mb-3">
        <el-table-column label="视频监控" align="center">
          <template slot-scope="scope">
            <a
              :href="scope.row.live_video_url"
              target="_blank"
              style="color: #1aad19; background: #c0daa4; display: block"
            >
              <img src="@/credit/assets/img/download.png" width="30" />
              <span>{{ scope.row.remark }}</span>
            </a>
          </template>
        </el-table-column>
        <el-table-column label="扫码查看" align="center">
          <template slot-scope="scope">
            <qr-code :value="scope.row.live_video_url"></qr-code>
          </template>
        </el-table-column>
      </el-table>
      <div class="visit-fuj" style="text-align: center">
        <el-button @click="hanldClose">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// const visdate = new Date().toLocaleDateString()
export default {
  props: {
    visible: Boolean,
    relatedData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      related: {},
      monitorData: [],
      liveVideo: [],
      saveLoading: false,
    }
  },
  watch: {
    relatedData: {
      handler: function (val) {
        if (val.customer_related_id) {
          this.related = { ...val }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.initRelated()
    this.getmonitData()
  },
  computed: {
    user() {
      return this.$store.getters.user
    },
  },
  methods: {
    initRelated() {
      if (this.related.customer_related_id) {
        return
      }
      this.related = JSON.parse(sessionStorage.getItem('customer_related_view'))
    },
    hanldClose() {
      this.$emit('update:visible', false)
    },
    getmonitData() {
      this.$api
        .getData('credit', 'credit_load_behind_new_view', {
          'customer_related_id.eq': this.related.customer_related_id,
        })
        .then(res => {
          if (!res.data) {
            return
          }
          if (res.data) {
            this.monitorData = res.data || []
            if (this.monitorData.length) {
              this.getLiveVideo(this.monitorData[0].customer_id)
            }
          }
        })
        .catch(() => {
          this.$message.error('获取数据失败，请重试！！')
        })
    },
    async getLiveVideo(id) {
      const [res] = await this.$utils.promise(
        this.$api.getData('industrial_db', 'farm_live_video', {
          'farm_id.eq': id,
        })
      )

      if (res) {
        this.liveVideo = res.data || []
      }
    },
  },
}
</script>

<style scoped></style>
